/*
 * @Author: shengduiliang 1107722390@qq.com
 * @Date: 2024-04-28 01:34:29
 * @LastEditors: shengduiliang 1107722390@qq.com
 * @LastEditTime: 2024-05-05 14:19:52
 * @FilePath: /treasure/src/ui-components/search-bar/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/*
 * @Author: shengduiliang 1107722390@qq.com
 * @Date: 2024-04-28 01:34:29
 * @LastEditors: shengduiliang 1107722390@qq.com
 * @LastEditTime: 2024-04-28 11:50:48
 * @FilePath: /treasury/src/ui-components/search-bar/index.tsx
 * @Description: 顶部搜索栏
 */
import { Icon, Input, View } from "@tarojs/components"
import { pxTransform } from "@tarojs/taro"
import { memo, useState } from "react"
import './index.scss'

interface SearchBarProps {
  placeholder: string
  value: string
  onChange: (value: string) => void
}

const SearchBar = ({ placeholder, value, onChange }: SearchBarProps) => {

  const [isFocus, setIsFocus] = useState(false)

  return (
    <View className='p-normal bg-primary'>
      <View className='p-normal pv-medium bg-secondary row-start-center border-radius-large'>
        <Icon type='search' size={pxTransform(32)} color='#3C628B' />
        <Input
          type='text'
          placeholder={placeholder}
          value={value}
          className='search-bar-input ml-medium flex-1'
          onInput={(e) => onChange(e.detail.value)}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
        />
        {
          value && isFocus ? <Icon
            type='clear'
            size={pxTransform(32)}
            color='#3C628B'
            onClick={() => onChange('')}
            className='pl-medium'
          /> : null
        }
      </View>
    </View>
  )
}

export default memo(SearchBar)